<template>
  <a-modal
    width="800px"
    :visible="myVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 发起入职审批 </template>
    <div class="index">
      <div class="process-list">
        <a-radio-group v-model="selected">
          <template v-for="item in props.data" :key="item.id">
            <a-radio :value="item.id">
              <template #radio="{ checked }">
                <a-space
                  align="start"
                  class="custom-radio-card"
                  :class="{ 'custom-radio-card-checked': checked }"
                >
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div>
                  <div>
                    <div className="custom-radio-card-title">
                      {{ item.flowName }}
                    </div>
                    <a-typography-text type="secondary">
                      {{ item.illustrate }}
                    </a-typography-text>
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  //参数说明
  defineProps<{
    data?: any[];
    visible?: boolean;
  }>(),
  {
    visible: false,
    data: () => []
  }
);

const emit = defineEmits(['update:visible', 'selectProcess']);

const myVisible = useVModel(props, 'visible', emit);
const handleOk = () => {
  if (!selected.value) {
    Message.info('请选择流程！');
    return;
  }
  emit('selectProcess', selected.value);
  close();
};
const handleCancel = () => {
  close();
};
const close = () => {
  myVisible.value = false;
};

const selected = ref(0);
</script>
<style lang="less" scoped>
.index {
  display: flex;
  justify-content: center;
  width: 100%;
  .process-list {
    align-items: stretch;
    display: flex;
    .process {
    }
  }
}
.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
